<template>
	<view>
		<scroll-view scroll-x class="scroll-row" :scroll-into-view="scrollInto" scroll-with-animation
			style="height: 100rpx;">
			<view class="scroll-row-item px-4 py-2" v-for="(item,index) in tabBars" :key="index" :id="'tab'+index"
				:class="tabIndex === index ? 'text-main font-lg font-weight-bold':''" @click="changeSwitch(index)">
				{{item.name}}
			</view>
		</scroll-view>
		<swiper :duration="150" :current="tabIndex" @change="swipper" :style="'height:'+scrollH+'px'">
			<swiper-item v-for="(item,index) in newsList" :key="index">
				<scroll-view scroll-y="true" :style="'height:'+scrollH+'px'" @scrolltolower="moreLoad(index)">
					<!-- 样式列表 -->
					<template v-if="item.list.length > 0">
					<block v-for="(item2,index2) in item.list " :key="index2">
						<common-list :item="item2" :index="index2" @fllow="follow" @doSupport="doSupport"></common-list>
						<!-- 背景线 -->
						<divider></divider>
					</block>
					<!-- 上拉加载 -->
					<load-more :moreLoad="item.moreLoad"></load-more>
					</template>
					<!-- 无数据显示的内容 -->
					<template>
						<no-thing></no-thing>
					</template>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import commonList from '@/components/common/common-list.vue'
	import loadMore from '@/components/common/load-more.vue';

	const demo = [{
			username: '昵称', //用户名
			userpic: '/static/logo.png', //用户头像
			newstime: '2021-6-4 15:30', //更新时间
			isFllow: false, //关注
			title: '我是标题', //标题
			titlepic: '', //封面
			//点赞和踩
			support: {
				type: 'support', //点赞类型
				support_count: 1, //点赞人数
				unsupport_count: 2 //踩的人数
			},
			comment_count: 0, //评论
			share_num: 0 //分享
		},
		{
			username: '昵称', //用户名
			userpic: '/static/logo.png', //用户头像
			newstime: '2021-6-4 15:30', //更新时间
			isFllow: false, //关注
			title: '我是标题', //标题
			titlepic: '/static/logo.png', //封面
			//点赞和踩
			support: {
				type: 'unsupport', //点赞类型
				support_count: 1, //点赞人数
				unsupport_count: 2 //踩的人数
			},
			comment_count: 2, //评论
			share_num: 2 //分享
		},
		{
			username: '昵称', //用户名
			userpic: '/static/logo.png', //用户头像
			newstime: '2021-6-4 15:30', //更新时间
			isFllow: false, //关注
			title: '我是标题', //标题
			titlepic: '/static/logo.png', //封面
			//点赞和踩
			support: {
				type: '', //未操作
				support_count: 1, //点赞人数
				unsupport_count: 2 //踩的人数
			},
			comment_count: 2, //评论
			share_num: 2 //分享
		}
	]
	export default {
		components: {
			commonList,
			loadMore
		},
		data() {
			return {
				scrollH: 600, //屏幕高度
				scrollInto: "",
				tabIndex: 0,//默认选中
				// 顶部选项卡
				tabBars: [{
						name: '推荐'
					},
					{
						name: '关注'
					},
					{
						name: '财经'
					},
					{
						name: '新闻'
					},
					{
						name: '热点'
					},
					{
						name: '体育'
					},
					{
						name: '电影'
					}
				],
				newsList: []
			}
		},
		//	监听原生标题栏搜索输入框点击事件
		onNavigationBarSearchInputClicked() {
			uni.navigateTo({
				url:'../search/search'
			})
		},
		//监听导航按钮点击事件
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url:'../add-input/add-input'
			})
		},
		//加载页面时
		onLoad() {
			// 获取高度
			//异步获取
			let res = uni.getSystemInfo({
				success: (res) => {
					console.log(res); //打印全部设备信息
					//px转化为rpx的计算
					this.scrollH = res.windowHeight - uni.upx2px(101)
				}
			})
			//根据选项 生成列表
			this.getDate()
		},
		watch: {

		},
		methods: {
			// 上拉加载
			moreLoad(index) {
				//获取列表数据
				console.log(this.newsList[index]);
				let item = this.newsList[index];
				if (item.moreLoad !== '上拉加载更多') return;
				//修改当前列表加载状态
				item.moreLoad = '加载中...';
				//模拟数据请求
				setTimeout(() => {
					//加载数据
					console.log(item.list);
					//ess6语法,扩展
					item.list = [...item.list, ...item.list];

					item.moreLoad = '上拉加载更多'
				}, 2000)
			},
			//获取数据
			getDate() {
				//生成列表模板
				var arr = []
				for (let i = 0; i < this.tabBars.length; i++) {
					let obj = {
						//上拉加载更多;加载中;没有更多了
						moreLoad: '上拉加载更多',
						list: []
					}
					if (i < 2) {
						obj.list = demo
					}
					arr.push(obj)
				}
				this.newsList = arr
			},
			// 监听滑动事件
			swipper(e) {
				// console.log(e.detail.current);
				// 调用选项卡=======拿到当前索引
				this.changeSwitch(e.detail.current)
			},
			// 点击切换
			changeSwitch(index) {
				// console.log(this.scrollInto);
				// console.log(index);
				if (this.tabIndex === index) {
					return
				}
				// console.log(this.tabIndex);
				this.tabIndex = index;
				// this.scrollInto要=绑定id的值 :id="'tab'+index"
				this.scrollInto = 'tab' + index
			},
			// 关注
			follow(e) {
				this.newsList[e].isFllow = true;
				uni.showToast({
					title: '关注成功',
					duration: 1000
				})
			},
			//顶踩操作
			doSupport(e) {
				
				// console.log(this.newsList[e.index].list[e.index]);
				// 如果是顶了就不能再次顶,已经踩了就不能再次踩,如果是没操作就可以进行顶踩操作
				// let item = this.list[e.index];
				let item = this.newsList[this.tabIndex].list[e.index];
				let msg = e.type === 'support' ? '顶' : '踩';
				/* 用户未进行操作 */
				if (item.support.type === '') {
					//拼接字符串
					item.support[e.type + '_count']++;
					console.log(e.type);
				} else if (item.support.type === 'support' && e.type === 'unsupport') {
					// 顶-1
					item.support.support_count--;
					// 踩+1
					item.support.unsupport_count++;
				} else if (item.support.type === 'unsupport' && e.type === 'support') {
					// 顶+1
					item.support.support_count++;
					// 踩－1
					item.support.unsupport_count--;
				}
				item.support.type = e.type;
				// 消息提示
				uni.showToast({
					title: msg + '成功'
				})
			}
		},

		computed: {

		},
	}
</script>

<style lang="scss">

</style>
